<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>

<head>
<title>Veiling</title>
<style type="text/css">
#kleinePlaatjes {
	border-collapse: collapse;
	margin-left: 0px;
}

#kleinePlaatjes td {
	border: 1px solid #1c478e;
	padding: 3px 7px 2px 7px;
}
</style>
<script>
	function ChangeColor(tableRow, highLight) {
		if (highLight) {
			tableRow.style.backgroundColor = '#5d6b82';
		} else {
			tableRow.style.backgroundColor = '';
		}
	}

	function ZetPlaatje(id, src) {
		var container = document.getElementById(id);
		container.innerHTML = "<a href='" + src + "' target='_blank'><img style='max-width: 400px; max-height: 400px;' src='" + src + "' id='vergrootPlaatje' /></a>";

	}
</script>
</head>

<body>

	<h2>
		<s:property value="veiling.naam" />
	</h2>
	<b>Openingsbedrag: </b>
	<s:property value="veiling.minimumBedrag" />
	<br />
	<b>Hoogste bod: </b>
	<s:property value="hoogsteBod" />
	<br />
	<b>Veiling sluit op: </b>
	<s:property value="veiling.getFormattedSluitDatum()" />
	<br />
	<b>Veiling is gestart door: </b>
	<s:property value="user.getUsername()" />
	<br />
	<div style="margin-left:-435px;">
	<s:form action="Bied">
	    <s:hidden name="veilingId" value="%{veilingId}" />
		<s:textfield name="bod" label="Vul hier uw bod in" />
    	<s:submit value="Plaats bod"/>
		</s:form></div>
		<s:if test="hasActionMessages()">
		<s:actionmessage />
	</s:if>
	<h2>Beschrijving:</h2>
	<s:property value="veiling.beschrijving" />
	<br />
	<br />

	<s:set name="teller" value="1" />

	<table id="kleinePlaatjes">
		<tr class="thcolor">
			<s:iterator value="veiling.mediaLijst">
				<td class="tdcolor" onmouseover="ChangeColor(this, true)"
					onmouseout="ChangeColor(this, false)"
					onclick="ZetPlaatje('test', document.getElementById('plaatje<s:property value="#teller" />').src)"><img
					style="max-width: 120px; max-height: 120px;"
					src="../plaatjes/<s:property value="naam" />"
					id="plaatje<s:property value="#teller" />" /></td>
				<s:set name="teller" value="#teller + 1" />
			</s:iterator>
		</tr>

	</table>
	<span id=test> <s:if test="#teller > 1">
			<a
				href="../plaatjes/<s:property value="veiling.getMediaLijst().get(0).getNaam()" />"
				target="_blank"> <img
				style="max-width: 400px; max-height: 400px;"
				src="../plaatjes/<s:property value="veiling.getMediaLijst().get(0).getNaam()" />"
				id="vergrootPlaatje" />
			</a>
		</s:if>
	</span>
</body>
</html>